<template>
    <div class="goodsEntry">
      
    
        <el-form :inline="true" style="padding: 20px">
            <el-form-item label="">
              <el-button type="primary" @click="returnOver">返回</el-button>
            </el-form-item>
            <el-form-item label="出库时间：">
                <el-date-picker
                  value-format="yyyy-MM-dd HH:mm:ss"
                  
                  v-model="endtime"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="changeTime">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="关键字搜索：">
          <el-input style="width: 300px;" v-model="queryData.goodsId" placeholder="请输入商品名称" size="medium"></el-input>
              
            </el-form-item>
           
            <el-form-item label="">
                <el-button type="primary" size="medium" @click="query">查询</el-button>
                <el-button type="primary" size="medium" @click="exportData">导出</el-button>
            </el-form-item>
         </el-form>
    
       
     
    
     
      <div class="wrapper">
          <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="订单出库" name="first">
                  <el-table class="table" :data="tableData" stripe highlight-current-row border>
                      <el-table-column
                      type="index"
                      width="50">
                    </el-table-column>
                    <el-table-column align="center" type="selection">
                    </el-table-column>
                    <el-table-column align="center" prop="order_no" label="订单号">
                    </el-table-column>
                    <el-table-column align="center" prop="order_time" label="下单时间">
                    </el-table-column>
                    <el-table-column align="center" prop="buy_count" label="订单数量">
                    </el-table-column>
                    <el-table-column align="center" prop="sku_no" label="SKU编码">
                    </el-table-column>
                    <el-table-column align="center" prop="goods_no" label="商品编号">
                    </el-table-column>
                    <el-table-column align="center" prop="goods_name" label="商品名称">
                      </el-table-column>
                   <el-table-column align="center" prop="goods_kind_first" label="商品类别">
                    </el-table-column>
                    <el-table-column align="center" prop="unit" label="单位">
                    </el-table-column>
                    <el-table-column align="center" prop="sure_out_time" label="生产时间">
                    </el-table-column>
                    <el-table-column align="center" prop="scan_now_count" label="出库数量">
                    </el-table-column>
                    <el-table-column align="center" prop="operator_username" label="经办人">
                    </el-table-column>
                  
                    <el-table-column align="center" prop="address" label="操作" width="150">
                      <template slot-scope="scope">
                        <span class="canceloff-btn" @click="Newwine(scope.row)" >查看</span>
                        
                      </template>
                    </el-table-column>
                  </el-table>
              </el-tab-pane>
              <el-tab-pane label="报损出库" name="second">
                  <el-table class="table" :data="tableData" stripe highlight-current-row border>
                      <el-table-column
                      type="index"
                      width="50">
                    </el-table-column>
                    <el-table-column align="center" type="selection">
                    </el-table-column>
                    <el-table-column align="center" prop="goodsId" label="报损id">
                    </el-table-column>
                    <el-table-column align="center" prop="checkNo" label="报损编号">
                    </el-table-column>
                    <el-table-column align="center" prop="outTime" label="出库时间">
                    </el-table-column>
                    <el-table-column align="center" prop="sku_no" label="SKU编码">
                    </el-table-column>
                    <el-table-column align="center" prop="goods_no" label="商品编号">
                    </el-table-column>
                    <el-table-column align="center" prop="goods_name" label="商品名称">
                      </el-table-column>
                   <el-table-column align="center" prop="goods_kind_first" label="商品类别">
                    </el-table-column>
                    <el-table-column align="center" prop="unit" label="单位">
                    </el-table-column>
                   
                    <el-table-column align="center" prop="operator_username" label="经办人">
                    </el-table-column>
                  
                    <el-table-column align="center" prop="address" label="操作" width="150">
                      <template slot-scope="scope">
                        <span class="canceloff-btn" @click="Newwine(scope.row)" >查看</span>
                        
                      </template>
                    </el-table-column>
                  </el-table>
              </el-tab-pane>
             
            </el-tabs>
       
        <el-pagination background layout="total,prev, pager, next,jumper" :page-size="page.pageSize" :total="page.total" :current-page="page.current"
          @current-change="handleCurrentChange">
        </el-pagination>
      </div>
      <!-- <el-dialog title="商品种类" :visible.sync="goodsCates.show" class="goods-dialog">
        <el-table class="dialog-table" :data="goodsCates.tableData" stripe highlight-current-row border :height="height">
          <el-table-column align="center" prop="date" label="序号">
          </el-table-column>
          <el-table-column align="center" prop="name" label="SKU编码">
          </el-table-column>
          <el-table-column align="center" prop="name" label="商品编码">
          </el-table-column>
          <el-table-column align="center" prop="date" label="商品名称">
          </el-table-column>
          <el-table-column align="center" prop="name" label="商品类别">
          </el-table-column>
          <el-table-column align="center" prop="name" label="香型">
          </el-table-column>
          <el-table-column align="center" prop="date" label="净含量">
          </el-table-column>
          <el-table-column align="center" prop="name" label="单位">
          </el-table-column>
          <el-table-column align="center" prop="name" label="酒精度">
          </el-table-column>
          <el-table-column align="center" prop="name" label="原料">
          </el-table-column>
          <el-table-column align="center" prop="name" label="数量">
          </el-table-column>
        </el-table>
      </el-dialog> -->
    </div>
  </template>
  
  <script>
    export default {
      data() {
        return {
          height: "auto",
          queryData: {
            startTime:'',
            endTime:'',
            // goodsId:'',
            storeId:'',
            inType:''
          },
          selectedOptions:[],
          goodsCates: {
            show: false,
            tableData: [{}]
          },
          tableData: [{}],
          
          endtime:'',
          page: {
            pageSize: 10,
            current: 1,
            total: 100
          },
          activeName: 'first',
          type:0
        };
      },
      mounted () {
        this.area();
        this.tableList();
      },
      methods: {
           //初始化数据
      async tableList(type) {
        try {
            let { data } = await this.$post({
                api: "/show/outstoreid",
                data:{
                 
                  current:this.page.current,
                  pageSize:this.page.pageSize,
                  startTime:this.queryData.startTime,
                  endTime:this.queryData.endTime,
                  goodsId:this.queryData.goodsId,
                  // status:1,
                  goodsKindSecond:'',
                  type:this.type
                }
              });
              if (data.code === 0) {
                this.tableData = data.data;
                this.page.total = data.rdPage.total;
                
              } else {
                this.$message({
                  type: "error",
                  message: data.msg
                });
              }
            } catch (e) {
              this.$message({
                type: "error",
                message: "接口报错"
              });
            }
        },
        //仓库
       async area() {
          try {
            let { data } = await this.$post({
              api: "/show/store/area"
              
            });
            if (data.code === 0) {
              this.selectedOptions = data.data;
            console.log(data)
            } else {
              this.$message({
                type: "error",
                message: data.msg
              });
            }
          } catch (e) {
            this.$message({
              type: "error",
              message: "接口报错"
            });
          }
       },
       //导出
       async exceldetail() {
          try {
            let { data } = await this.$post({
              api: "/import/instore/detail",
              data:{
                current:this.page.current,
                pageSize:this.page.pageSize,
                startTime:this.queryData.startTime,
                endTime:this.queryData.endTime,
                goodsId:this.queryData.goodsId,
                storeId:this.queryData.storeId,
                inType:this.queryData.inType,
              }
              
            });
            if (data.code === 0) {
              let urlstr = url+data.data.replace('static/','');
                window.location.href=urlstr
              console.log(data)
            } else {
              this.$message({
                type: "error",
                message: data.msg
              });
            }
          } catch (e) {
            this.$message({
              type: "error",
              message: "接口报错"
            });
          }
       },
        //查询
        query() {
          this.tableList();
         },
        //导出
        exportData(){
          this.$confirm("确定将导出记录，您确定要导出吗?", "系统提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }).then(() => {
           
          }).catch(() => {
            this.$message({
              type: "info",
              message: "已取消导出"
            });
          });
        },
        
        handleCurrentChange(val) {
          this.page.current = val;
          this.tableList();
          console.log(val);
        },
        showCateDialog() {
          this.goodsCates.show = true;
        },
        //时间选择器
        changeTime(arr){
          console.log(arr)
          if(arr != null){
            this.queryData.startTime = arr[0];
            this.queryData.endTime = arr[1]; 
          }
          
        },
        //新酒入库
        Newwine(row){
          
          this.$router.push('/outgoingOrdersDetail/'+row.order_no+'/'+row.sku_no)
         
        },
        returnOver(){
          this.$router.go(-1);
        },
        handleClick(tab) {
          this.type = tab.index
         this.tableList()
        //  console.log(tab.index);
       }
      }
    };
  </script>
  
  <style lang="scss" scoped>
    .query {
      overflow: hidden;
      border-bottom: 1px solid #eeeeee;
      &-item {
        float: left;
        margin: 15px 20px;
      }
      .el-input {
        width: 150px;
      }
      .el-button {
        margin: 0 15px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  
    .entry-info {
      padding: 15px 20px;
      border-bottom: 1px solid #eeeeee;
    }
  
    .goods-category {
      line-height: 32px;
      span {
        color: #0033ff;
        text-decoration: underline;
        cursor: pointer;
      }
    }
  
    .goods-count {
      line-height: 32px;
    }
  
    .goods-id {
      display: flex;
      justify-content: space-between;
      padding: 0 40px;
      border-left: 1px solid #000;
      border-right: 1px solid #000;
      span {
        position: relative;
        display: inline-block;
        padding: 8px 15px;
        border: 1px solid #333;
        &:after {
          content: "";
          position: absolute;
          top: -6px;
          left: -6px;
          width: 100%;
          height: 100%;
          padding: 6px;
          border: 1px solid #333;
        }
      }
    }
  
    .wrapper {
      padding: 10px 15px;
    }
  
    .canceloff-btn {
      color: #0033ff;
      cursor: pointer;
    }
  </style>